<template>
  <div class="scheme-show-card">
    <el-card :body-style="{ padding: '0px'}" shadow="hover" >
      <div class="image-box flex-row-center">
        <!--        图片-->
        <y-image
            fit="cover"
            class="image"
            :src="scheme.imagesrc"></y-image>
<!--        价格标识-->
        <div class="price-box">{{computedPrice}}</div>
        <!--        图片面罩-->
        <div class="image-mask flex-col-center">
<!--          方案描述-->
          <div class="width-80-percent">
              {{scheme.description}}
          </div>
<!--          操作按钮-->
          <div class="margin-col-10">
            <el-button-group>
              <el-button size="small" text @click="emit('collect',scheme)">收藏</el-button>
              <el-button size="small" text @click="emit('detail',scheme)">详情</el-button>
            </el-button-group>
          </div>
        </div>
      </div>
      <div style="padding: 14px" class="flex-col-center-start">
        <span style="margin-bottom: 10px">
          <el-text :line-clamp="1" truncated>{{scheme.schemeName}}</el-text>
        </span>
        <el-space wrap size="large" >
          <el-statistic title="收藏数" :value="scheme.collectionNum" :formatter="collectionNumFormatter" >
            <template #title>
              <div class="flex-row-center">
                收藏数
                <el-icon ><StarFilled /></el-icon>
              </div>
            </template>
          </el-statistic>
          <el-statistic title="评分" :value="scheme.mark" :precision="1" >
            <template #title>
              <div class="flex-row-center">
                评分
                <el-icon ><ChatLineRound /></el-icon>
              </div>
            </template>
          </el-statistic>
        </el-space>
        <span class="flex-row-center font-size-14 margin-col-5">
          <el-icon><Timer /></el-icon>
<!--          <span>{{computedDate(scheme.createTime)}}</span>-->
          <span>{{scheme.createTime}}</span>
        </span>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>

import {defineEmits, defineProps, computed} from "vue";

import YImage from "@/components/img/YImage.vue";
import {SimpleScheme} from "@/ts/scheme";
import {toString} from "@/utils/DateUtil";

export interface SchemeShowCardType{
  id:number
  schemeName:string
  imagesrc:string
  description:string
  collectionNum:number
  mark:number
  createTime:Date,
  price?:number
}

let props = defineProps<{
  scheme: SchemeShowCardType
}>()
let emit = defineEmits<{
  (e:"select",scheme:SchemeShowCardType):void
  (e:"collect",scheme:SchemeShowCardType):void
  (e:"detail",scheme:SchemeShowCardType):void
}>()

function collectionNumFormatter(collectionNum:number){
  let max=10000
  return collectionNum<max?collectionNum:(collectionNum/max).toFixed(0)+"w+"
}

let computedDate=computed(()=>{
  return (date:Date)=>{
    return toString(date)
  }
})
let computedPrice=computed(()=>{
  let price = props.scheme.price
  if(price != undefined){
    return price === 0?'免费':'￥'+price
  }
  return ''
})

</script>

<style scoped lang="less">
.scheme-show-card {
  width: 200px;
  height: fit-content;
  .image-box{
    position: relative;
    width: 200px;
    height: 200px;
    cursor: pointer;
    overflow:hidden;
    .image{
      z-index: 0;
    }
    .image-mask{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      background-color: black;
      color: whitesmoke;
      opacity: 0;
      transition: all 0.3s;
      caret-color: transparent;
    }
    &:hover{
      .image-mask{
        opacity: 0.8;
      }
    }
  }
  .price-box{
    position: absolute;
    right: 1em;
    bottom: 0.5em;
    z-index: 1;
    width: fit-content;
    height: 20px;
    font-size: 14px;
    font-weight: 550;
  }


}

</style>